
<ul >
            	 
					
<li data-transition="fade"   data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">

<div id="app">
					<!--  BACKGROUND IMAGE -->
					
					<div v-for="item in coupon">
					<img src="images-slider/wide2.jpg" alt="" />
					

					<!-- THE CAPTIONS IN THIS SLIDE -->
					<div class="tp-caption sfl"
						data-x="-130"
						data-y="100"
						data-speed="300"
						data-start="300"
						data-easing="easeOutBack">
						<img src="images-slider/rb.png" alt="">
					</div>

					<div class="caption sfb"
						data-x="0"
						data-y="130"
						data-speed="300"
						data-start="800"
						data-easing="easeOutExpo">
						<h2>{{item.adName}}</h2>
					</div>

					<div class="tp-caption med-white sfl"
						data-x="0"
						data-y="220"
						data-speed="300"
						data-start="1000"
						data-easing="easeOutExpo" style="font-size:20px;">
						{{item.adTitle}}
					</div>

					<div class="tp-caption small-white sfr"
						data-x="0"
						data-y="260"
						data-speed="300"
						data-start="1200"
						data-easing="easeOutExpo">
						<a href="#" class="btn btn-large btn-primary">在线测评</a>
					</div>

					<div class="tp-caption small-white lfb"
						data-x="300"
						data-y="90"
						data-speed="1000"
						data-start="1400"
						data-easing="easeOutExpo">
						<img :src="'/api/education-website/eduWebsite/download/'+item.picPath" alt="" style="position:absolute; left:200px; " width="500px" height="400px"/>
					</div>
				</li>
				 <li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
					<!--  BACKGROUND IMAGE -->
					<img src="images-slider/wide3.jpg" alt="" />

					<!-- THE CAPTIONS IN THIS SLIDE -->
					<div class="tp-caption sfl"
						data-x="-130"
						data-y="150"
						data-speed="300"
						data-start="300"
						data-easing="easeOutBack">
						<img src="images-slider/rb.png" alt="">
					</div>

					<div class="tp-caption med-white lfl"
						data-x="0"
						data-y="200"
						data-speed="300"
						data-start="800"
						data-easing="easeOutExpo" style="font-size:18px; line-height:25px;">
						<p>我们一直致力于优秀的职业教育，<br/>为你搭建成就梦想的舞台。</p>
					</div>

					<div class="caption sfb very-big-white"
						data-x="700"
						data-y="230"
						data-speed="300"
						data-start="1200"
						data-easing="easeOutExpo">
						<i>winner</i>
					</div>
					<div class="tp-caption med-white lfl"
						data-x="0"
						data-y="150"
						data-speed="300"
						data-start="800"
						data-easing="easeOutExpo" style="font-size:22px; line-height:30px;">
						<h2 style="font-size:30px">职业教育在线测评与学习平台</h2>
					</div>

					<div class="tp-caption small-white lfr"
						data-x="0"
						data-y="280"
						data-speed="300"
						data-start="1600"
						data-easing="easeOutExpo">
						<a href="#" class="btn btn-large btn-primary">在线学习</a>
					</div>


					<div class="tp-caption lfb"
						data-x="390"
						data-y="90"
						data-speed="1000"
						data-start="2000"
						data-easing="easeOutExpo"
						data-endeasing="fade" style="left:700px"
						>
						<img src="images-slider/guy-shadow.png" alt="">
					</div>

					<div class="tp-caption small-white lft"
						data-x="240"
						data-y="0"
						data-speed="2000"
						data-start="2600"
						data-easing="easeOutExpo">
						<img src="images-slider/spotlight.png" alt="">
					</div>

					<div class="tp-caption fade"
						data-x="390"
						data-y="90"
						data-speed="2000"
						data-start="2600"
						data-easing="easeOutExpo">
						<img src="images-slider/guy.png" alt="">
					</div>
				</li>
				
				<!-- THE FIRST SLIDE -->
				<li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
					<!--  BACKGROUND IMAGE -->
					<img src="images-slider/wide1.jpg" alt="" />

					<!-- THE CAPTIONS IN THIS SLIDE -->
					<div class="caption large_text sfb"
						data-x="300"
						data-y="207"
						data-speed="300"
						data-start="800"
						data-easing="easeOutExpo">
						<img src="images-slider/our-features.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="220"
						data-y="115"
						data-speed="300"
						data-start="1000"
						data-easing="easeOutBack">
						<img src="images-slider/lu.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="-50"
						data-y="110"
						data-speed="300"
						data-start="1200"
						data-easing="easeOutBack">
						<img src="images-slider/clean.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="180"
						data-y="217"
						data-speed="300"
						data-start="1400"
						data-easing="easeOutBack">
						<img src="images-slider/lm.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="-20"
						data-y="230"
						data-speed="300"
						data-start="1600"
						data-easing="easeOutBack">
						<img src="images-slider/responsive.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="220"
						data-y="285"
						data-speed="300"
						data-start="1800"
						data-easing="easeOutBack">
						<img src="images-slider/lb.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="40"
						data-y="360"
						data-speed="300"
						data-start="2000"
						data-easing="easeOutBack">
						<img src="images-slider/bootstrap.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="625"
						data-y="115"
						data-speed="300"
						data-start="2200"
						data-easing="easeOutBack">
						<img src="images-slider/ru.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="730"
						data-y="85"
						data-speed="300"
						data-start="2400"
						data-easing="easeOutBack">
						<img src="images-slider/solid.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="650"
						data-y="217"
						data-speed="300"
						data-start="2600"
						data-easing="easeOutBack">
						<img src="images-slider/rm.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="770"
						data-y="217"
						data-speed="300"
						data-start="2800"
						data-easing="easeOutBack">
						<img src="images-slider/lightweight.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="625"
						data-y="285"
						data-speed="300"
						data-start="3000"
						data-easing="easeOutBack">
						<img src="images-slider/rb.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="730"
						data-y="345"
						data-speed="300"
						data-start="3200"
						data-easing="easeOutBack">
						<img src="images-slider/fresh.png" alt="">
					</div>
					</div>
					</div>
				</li>


				 
			   
			</ul>
			
<script src="../js/vue.js"></script>
<script>

    new Vue({
        el:"#app",
        data:{
            coupon:${pics}
        }
    });
</script>